<!-- 商家 -->
<template>
	<view class="store">
		<view class="store_top">
			<!-- 轮播图 -->
			<view class="banner">
				<banner-list :banners="base_info.bannerfoods" background="#FF504C" :heightFix="true" swiperHeight="272rpx" >
				</banner-list>
			</view>
			<!-- 菜单 -->
			<menuList :menus="menus" @click="toPage(item.url)"></menuList>
			<!-- 满园香列表 -->
			<view class="cate">
				<view class="cate_list" v-for="(item,index) in cates" :key="item.id">
					<view class="list_name">{{item.name}}</view>
					<view class="list_label">{{item.label}}</view>
					<image src="/static/img/ic_group_buy.png"  ></image>
				</view>
			</view>
			<!-- 地点 -->
			<view class="address"  @click="toPage()">
				<image src="/static/img/q.png"  ></image>
				<view class="right">
					<view class="title">
						<view class="place">东海泰禾广场</view>
						<view class="distance">187.23km</view>
					</view>
					<view class="total">共24家美食 , 206个优惠</view>
				</view>
			</view>
			<!-- 火锅特惠 -->
			<!-- 轮播图 -->
			<view class="banner">
				<banner-list :banners="base_info.bannerfoods" background="#FF504C" :heightFix="true">
				</banner-list>
			</view>
		</view>
		<!-- 导航栏 -->
		<v-tabs name="cate_name" gutter="19" color="#eee" count="cate_count" :list="list" active-color="#000"
			:is-scroll="true" :current="current" @change="changeTabs"></v-tabs>
		<!-- 下拉菜单 -->
		<dropdown-menu  :top="top" @selectOption="selectOption"></dropdown-menu>
		<!-- 商家 -->
		<view class="seller">
		<store :store_data="fun(notice_list,current)" :current="current" @jumpDetail="jumpDetail"></store>
		</view>
		<!-- tabbar栏 -->
		<buttom-tabbar></buttom-tabbar>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import menuList from './menu-list.vue'
	export default {
		components:{
			menuList
		},
		data() {
			return {
				select: '全部',
				seller: [
					{
						id: 0,
						img: "https://kuaichuang.insunny.cc/temp_img/store1.png",
						store: "满缘香（东海泰禾广场）",
						num: 800,
						status: false,
						text: [{
							id: 0,
							label: "代",
							value: "100积分购10元代金券"
						}],
						url: "/pages/pagesBusiness/business_details/index"
					},
					{
						id: 1,
						img: "https://kuaichuang.insunny.cc/temp_img/store1.png",
						store: "满缘香（东海泰禾广场）",
						num: 800,
						status: false,
						text: [
							{
							id: 0,
							label: "代",
							value: "100积分购10元代金券"
							},
							{
							id: 1,
							label: "代",
							value: "100积分购10元代金券"
							},
							{
							id: 2,
							label: "代",
							value: "100积分购10元代金券"
							},
						],
						url: "/pages/pagesBusiness/business_details/index"
					},

				],
				//下拉菜单
				top: 0,	
				current: 0,
				active: 0,
				list: [{              //导航栏
						cate_name: '全部'
					}, {
						cate_name: '休闲食物'
					}, {
						cate_name: '生活服务',
					},
					{
						cate_name: '养生保健'
					}, {
						cate_name: '亲子'
					}, {
						cate_name: '休闲娱乐',
					},
				],
				cates: [{
						id: 0,
						name: "满园香",
						label: "三折起购",
					},
					{
						id: 1,
						name: "星巴克专区",
						label: "免费升杯",
					},
					{
						id: 2,
						name: "超值特惠",
						label: "超划算",
					},
					{
						id: 3,
						name: "2021开门红",
						label: "1元抵500",
					},
				],
				menus: [ //菜单
					{
						id: 0,
						name: "丽人频道",
						img: "/static/img/icon_01.png",
						url: "/"
					},
					{
						id: 1,
						name: "美食专区",
						img: "/static/img/icon_02.png",
						url: "/pages/seller/filefood/index"
					},
					{
						id: 2,
						name: "我的积分",
						img: "/static/img/icon_03.png",
						url: "/pages/user/score/index"
					},
					{
						id: 3,
						name: "我的卡劵",
						img: "/static/img/icon_04.png",
						url: "/pages/user/tickey/index"
					},
					{
						id: 4,
						name: "积分攻略",
						img: "/static/img/icon_05.png",
						url: "/pages/user/score/task/index"
					},
				],
			};
		},
		mounted() {},
		methods: {
			jumpDetail(item,index) {
				this.$store.dispatch('init/get_notice_detail', item)
				uni.navigateTo({
					url: "/pages/seller/detail/index" + "?name=" + item.id + item.name
				})
			},
			toPage(val) {
				uni.navigateTo({
					url: val
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
            // 获取第一个分类的名称，以及下标
			changeTabs(index) {
				this.current = index;
                this.list_name = this.list[index].cate_name;
				this.select = this.list_name
			},
			//选择二级菜单
			selectOption(active, index) {
				this.active = active
				this.index = index
			},
			// 从小到大
			compare(property) {
				return function (a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},
			// 从大到小
			compares(property) {
				return function (a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				}
			},
			fun(val, current) {
			    let arr = [];
			    let obj = [] ;
				val.forEach((item, index) => {
			        if (item.type !== '' && current == 0) {
			            arr.push(item);
			        }
					if (item.type === this.list_name && current == this.current) {
						arr.push(item);
					}
				});
				if (this.select == '全部') {
					if(this.active ==3 && this.index == 0) {
						arr.sort(this.compare('distance'))
					}
					if (this.active ==3 && this.index == 1) {
						arr.sort(this.compares('distance'))
					}
				}
				//不是全部时判断二级标签点击的是哪个
			    if (this.select != '全部') {
			        arr.forEach((item,index) => {
			            if (this.select == item.type) {
			                obj.push(item);
			            }
			        })
					// 好评数
					if (this.active == 1 && this.index == 0 ) {
						obj.sort(this.compare('num'))
					}
					if (this.active == 1 && this.index == 1 ) {
						obj.sort(this.compares('num'))
					}
					//兑换量
					if (this.active == 2 && this.index == 0 ) {
						obj.sort(this.compare('num'))
					}
					if (this.active == 2 && this.index == 1 ) {
						obj.sort(this.compares('num'))
					}
					// 距离远近
					if(this.active ==3 && this.index == 0) {
						obj.sort(this.compare('distance'))
					}
					if (this.active ==3 && this.index == 1) {
						obj.sort(this.compares('distance'))
					}
			        arr = obj;
			    }
			    return arr;
			},
		},
		computed:{
			// 获取vuex 数据
			...mapState({
				base_info: state => state.init.goods_detail.base_info, // banner信息 - 商品基本信息
				notice_list: state => state.init.notice,
				notice_detail: state => state.init.notice_detail,
			}),
		}

	};
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>
